<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="card kjfs">
          <p class="title"><i class="fa fa-th-large fa-lg"></i>快捷方式</p>
          <ul>
            <li><router-link to="/study" class="kjfs kjfs-bluee"><span><i class="el-icon-tickets fa-2x"></i></span><span>浏览日志</span></router-link></li>
            <li><router-link to="/updataTime" class="kjfs kjfs-pinkk"><span><i class="fa fa-hand-stop-o fa-2x"></i></span><span>上传统计</span></router-link></li>
            <li><router-link to="/watchTime" class="kjfs kjfs-yelloww"><span><i class="fa fa-universal-access fa-2x"></i></span><span>共享预览</span></router-link></li>
          </ul>
          <ul>
            <li><router-link to="/ClassMangement" class="kjfs kjfs-grennn"><span><i class="fa fa-cloud-upload fa-2x"></i></span><span>班级资料库</span></router-link></li>
            <li><router-link to="/TeacherMangement" class="kjfs kjfs-purplee"><span><i class="fa el-icon-menu fa-2x"></i></span><span>教师资料库</span></router-link></li>
            <li><router-link to="/storeHouse" class="kjfs kjfs-lightBluee"><span><i class="fa fa-file-code-o fa-2x"></i></span><span>公共资料库</span></router-link></li>
          </ul>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card dbsx">
          <p class="title"><i class="fa fa-file-text-o"></i>待办事项</p>
          <div style="float: left;">
            <p style="margin-left:12px;font-size: 15px" >{{ todos.length }} 项事情里面有{{ todos.filter(item => !item.done).length }}项待完成</p>
          </div>
          <div style="float: right">
            <el-button type="text" @click="dialogFormVisible = true" style="margin-right: 75px">添加事项</el-button>
            <el-dialog title="添加事件" :visible.sync="dialogFormVisible" >
              <el-form :model="todoText">
                <el-form-item label="活动名称" :label-width="formLabelWidth">
                  <el-input v-model="todoText" autocomplete="off" @keydown.enter="handleAddTodoClick"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false;handleAddTodoClick">确 定</el-button>
              </div>
            </el-dialog>
          </div>
          <el-table
            :data="todos"
            tooltip-effect="dark"
            style="width: 100%"
            max-height="230px" >
            <el-table-column  width="55">
              <template #default="scope">
                <el-checkbox v-model="scope.row.done"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              label="具体事件"
              width="300">
              <template slot-scope="scope">{{ scope.row.title }}</template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="deleteRow(scope.$index, todos)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="card bbxx">
          <p class="title"><i class="fa fa-server"></i>公告栏</p>
          <div class="block">
            <el-carousel height="270px">
              <el-carousel-item v-for="item in imgList" :key="item">
                <img :src="item" class="image" >
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <line-echarts id="lineEcharts" height="450px" ref="echarts"></line-echarts>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineEcharts from "../../components/ECharts/lineEcharts"
import "../../static/images/ztzl01.jpg"
export default {
  name: "mainIndex",
  components: {LineEcharts},
  data () {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      todoText: "",
      imgList: [
        require("../../static/images/ztzl01.jpg"),
        require("../../static/images/ztzl03.jpg"),
        require("../../static/images/ztzl04.jpg"),
        require("../../static/images/ztzl05.jpg")
      ],
      todos: [
        {
          id: 1,
          title: "吃饭",
          done: true
        },
        {
          id: 2,
          title: "睡觉",
          done: false
        },
        {
          id: 3,
          title: "敲代码1",
          done: true
        },
        {
          id: 4,
          title: "敲代码2",
          done: false
        },
        {
          id: 5,
          title: "敲代码3",
          done: false
        }, {
          id: 6,
          title: "敲代码4",
          done: false
        }
      ]
    }
  },
  mounted () {
    this.selfAdaption()
  },
  methods: {
    // echart自适应
    selfAdaption () {
      let that = this
      setTimeout(() => {
        window.onresize = function () {
          if (that.$refs.echarts) {
            that.$refs.echarts.chart.resize()
          }
        }
      }, 10)
    },
    handleAddTodoClick () {
      // 得到 文本框的内容并把内容 push 到 todos 中
      const todoText = this.todoText.trim()
      // 非空校验
      if (!todoText.length) {
        return
      }
      const todos = this.todos
      // 数据驱动视图，数据改变，视图改变
      todos.push({
        id: todos[todos.length - 1].id + 1,
        title: todoText,
        done: false
      })
      // 添加 todo 完成，清空文本
      this.todoText = "" // 数据驱动视图，数据改变，视图变化
    },

    deleteRow (index, rows) {
      rows.splice(index, 1)
    }
  }
}

</script>

<style lang="scss">
  $top:top;
  $bottom:bottom;
  $left:left;
  $right:right;
  $leftright: ($left, $right);
  $pinkk: #eec2d3;
  $bluee: #409eff;
  $yelloww: #f4d884;
  $grennn: #89dda0;
  $purplee: #78a2ea;
  $lightBluee: #b8d6ff;

  $list: bluee pinkk yelloww grennn purplee lightBluee;
  $list1: $bluee $pinkk $yelloww $grennn $purplee $lightBluee;
  %shadow{
    background: #fff;
    -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(0, 0, 0, 0.2);
    .title{
      font-size: 14px;
      padding: 10px;
      i{
        margin-#{$right}: 5px;
      }
    }
  }

  @mixin flex($direction:row,$content:space-between){
    display: flex;
    flex-direction: $direction;
    justify-content: $content;
  }

  .image{
    width: 540px;
    height:270px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }


  .done {
    text-decoration: line-through;
    color: #ccc;
  }
  .card{
    color: #666;
    @extend %shadow;

    ul{
      @include flex;
      li{
        flex: 1;
        a{
          color: #666666;
          align-items:center;
          padding-#{$top}: 20px;
          padding-#{$bottom}: 20px;
          @include flex(column);
          span{
            height: 44px;
          }
          .num{
            line-height: 44px;
            font-size: 42px;
            color: $bluee;
            margin: 0px;
          }
        }
        .kjfs-bluee{
          color: $bluee;
        }
        .kjfs-pinkk{
          color: $pinkk;
        }
        .kjfs-yelloww{
          color: $yelloww;
        }
        .kjfs-grennn{
          color: $grennn;
        }
        .kjfs-purplee{
          color: $purplee;
        }
        .kjfs-lightBluee{
          color: $lightBluee;
        }
        &:hover{
          .kjfs-bluee{
            color: #ffffff;
            background: $bluee;
          }
          .kjfs-pinkk{
            color: #ffffff;
            background: $pinkk;
          }
          .kjfs-yelloww{
            color: #ffffff;
            background: $yelloww;
          }
          .kjfs-grennn{
            color: #ffffff;
            background: $grennn;
          }
          .kjfs-purplee{
            color: #ffffff;
            background: $purplee;
          }
          .kjfs-lightBluee{
            color: #ffffff;
            background: $lightBluee;
          }
        }
      }
    }
    .table{
      padding: 21px;
      p{
        height: 52px;
        line-height: 52px;
        border: 1px solid #cccccc;
        overflow: hidden;
        border-#{$top}: none;
        @include flex( null,start);
        &:first-child{
          border-#{$top}: 1px solid #cccccc;
        }
        span{
        }
        .tit{
          width: 90px;
          min-width: 90px;
          height: 100%;
          text-align: center;
          border-#{$right}: 1px solid #cccccc;
          margin-#{$right}: 18px;
        }
        span.gitbox{
          flex: 1;
          height: 100%;
          overflow: hidden;
          @include flex(row,start);
          a{
            &:first-child{
              margin-#{$right}: 30px;
            }
          }
        }
      }
    }
  }
  #lineEcharts{
    margin-#{$top}: 30px;
    padding-#{$top}: 30px;
    @extend %shadow;
  }
  //#maintable{
  //  margin-#{$top}: 30px;
  //  padding-#{$top}: 10px;
  //  @extend %shadow;
  //}
</style>
